<include file="Common:header" title="修改户型·"/>



<!--主题-->
<div class="page-header">
    <h1>
        您当前操作
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            小程序首页
        </small>
    </h1>
</div>




<div class="row">
    <div class="col-xs-12">
        <form class="form-horizontal" id="form" method="post" action="{:U('Homepage/index')}">
            <input type="hidden" value="{$data.id}" name="id">

            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> banenr图上传：<p class="red">要求尺寸：320*200</p>  </label>
                <div class="col-sm-10">
                    <div id="input_bann_img">
                    </div>
                    <div class="pics">
                        <ul id="ul_pics" class="ace-thumbnails clearfix">
                            <volist name="images" id="vo">
                                <li id="li_{$i}">
                                    <div data-rel="colorbox" class="cboxElement">
                                        <img style="width:160px;height: 100px;" alt="" src="{$vo}">
                                        <div class="text">
                                            <div class="inner">删除该图片</div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="old_banenr_images[]" value="{$vo}">
                                    <div class="tools tools-bottom">
                                        <a href="javascript:;" onclick="del_banner('{$i}')">
                                            <i class="ace-icon fa fa-times red"></i>
                                        </a>
                                    </div>
                                </li>
                            </volist>
                        </ul>
                        <button class="btn btn-info btn-sm" type="button" onclick="banner_choose()">
                            <i class="icon-ok bigger-110 "></i>添加图片
                        </button>
                        <!--<a class="picture_add" style="width:100px;border: 1px solid;margin: 10px;padding: 15px;" onclick="banner_choose()">+加图</a>-->
                    </div>
                </div>
            </div>
            <div class="space-4"></div>





            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <div class="btn btn-info" onclick="submit_form()">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        保存
                    </div>

                    <button class="btn" type="reset">
                        <i class="ace-icon fa fa-undo bigger-110"></i>
                        重置
                    </button>

                    <div class="space-4"></div>
                    &nbsp; &nbsp; &nbsp;

                </div>
            </div>
        </form>
    </div>
</div>


<div class="modal fade" id="modal_upload">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">图片裁剪</h4>
            </div>
            <div class="modal-body" style="margin:0 auto; text-align: center;">
                <div id="clipArea" ></div>
                <input type="file" id="file" style="display:none;">
                <button class="btn btn-info btn-sm" type="button"  onclick="$('#file').click();">
                    <i class="icon-ok bigger-110 "></i>选择图片
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="clipBtn" type="button" class="btn btn-primary" data-dismiss="modal">确定图片</button>
            </div>
        </div>
    </div>
</div>
<style>
    .clearfix li{
        display:inline;
    }
    #clipArea {
        margin: 20px;
        height: 200px;
    }
    #file,
    #clipBtn {
        margin: 20px;
    }
</style>


<script src="__PUBLIC__/assets/js/jquery-2.1.1.js"></script>

<script src="__PUBLIC__/photoClip/js/iscroll-zoom.js"></script>
<script src="__PUBLIC__/photoClip/js/hammer.js"></script>
<script src="__PUBLIC__/photoClip/js/jquery.photoClip.js"></script>

<include file='Common:header_nav' />
<script>
    //删除banner图
    function del_banner(number){
        $('#li_'+number).remove();
    }
    //用来计算banner图片个数
    var num = 0;
    //图片裁剪初始
    $("#clipArea").photoClip({
        width: 410,
        height: 220,
        file: "#file",
        ok: "#clipBtn",
//		loadStart: function() {
//			console.log("照片读取中");
//		},
//		loadComplete: function() {
//			console.log("照片读取完成");
//		},
        clipFinish: function(dataURL) {
            $('#ul_pics').append('<li id="li_'+num+'">'+
                '<div data-rel="colorbox" class="cboxElement">'+
                '<img style="width:160px;height: 100px;" alt="" src="'+dataURL+'">'+
                '<div class="text">'+

                '</div>'+
                '<input type="hidden" name="images[]" value="'+dataURL+'">'+
                '<div class="tools tools-bottom">'+
                '<a href="javascript:;" onclick="del_banner('+num+')">'+
                '<i class="ace-icon fa fa-times red"></i>'+
                '</a>'+
                '</div>'+
                '</li>');
            num += 1;
            //console.log(dataURL);
        }
    });
    //banner选择
    function banner_choose(){
        $("#modal_upload").modal();
        //点击选择图片。有时chrome浏览器反应很慢
        //$('#file').click();
    }




</script>

<script>
    function submit_form() {
        if ($('#covered_area').val() == '') {
            layer.msg('建筑面积不能为空');
            $('#covered_area').focus();
            return false;
        }
        if ($('#covered_area').val() <=0) {
            layer.msg('建筑面积必须大于0');
            $('#covered_area').focus();
            return false;
        }

        if ($('#average_price').val() == '') {
            layer.msg('均价不能为空');
            $('#average_price').focus();
            return false;
        }
        if ($('#average_price').val() <0) {
            layer.msg('均价不能小于0');
            $('#average_price').focus();
            return false;
        }

        if ($('#bedroom').val() == '') {
            layer.msg('卧室不能为空');
            $('#bedroom').focus();
            return false;
        }
        if ($('#bedroom').val() <0) {
            layer.msg('卧室数量不能小于0');
            $('#bedroom').focus();
            return false;
        }

        if ($('#hall').val() == '') {
            layer.msg('厅不能为空');
            $('#hall').focus();
            return false;
        }
        if ($('#hall').val() <0) {
            layer.msg('厅数量不能小于0');
            $('#hall').focus();
            return false;
        }

        if ($('#toilet').val() == '') {
            layer.msg('卫生间不能为空');
            $('#toilet').focus();
            return false;
        }
        if ($('#toilet').val() <0) {
            layer.msg('卫生间数量不能小于0');
            $('#toilet').focus();
            return false;
        }


//
//        if ($('#file').val() == '') {
//            layer.msg('图片不能为空');
//            $('#file').focus();
//            return false;
//        }


        $('#form').submit();
    }
</script>


<include file="Common:footer"/>